<template>
  <div class="current-plan">
    <van-nav-bar title="活期计划" left-arrow @click-left="goBack" @click-right="onClickRight">
      <i style="font-size:12px;" slot="right">历史记录</i>
    </van-nav-bar>
    <!-- nav栏 -->
    <van-tabs @click="getNavId">
      <van-tab v-for="(item,index) in topNav" :key="index">
        <div slot="title">
          <div class="tabs">
            <div class="tabs-item">
              <img style="width:18%" :src="item.img_url2" alt>
              {{item.virtualWalletName}}
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 产品活期计划 -->
    <div class="plan-live" v-if="moneyShow">
      <p>{{contianLive.annualInterestRate}}%</p>
      <p>今日年化利率</p>
      <p>在投总额{{add.investmentAmount}} {{nameNow}}</p>
      <div class="plan-live-one">
        <div>
          <p>累计收益（{{nameNow}}）</p>
          <p>{{add.totalIncome}}</p>
        </div>
        <div>
          <p>昨日收益（{{nameNow}}）</p>
          <p>{{add.yesterdayInmoce}}</p>
        </div>
      </div>
      <div class="plan-live-two">
        <div @click="outGo">转出</div>
        <div @click="outIn">转入</div>
      </div>
    </div>
    <!-- 还未购买 -->
    <div class="plan-live" v-if="moneyShowTwo">
      <p>{{contianLive.annualInterestRate}}%</p>
      <p>今日年化利率></p>
      <p>在投总额0 {{nameNow}}</p>
      <div class="plan-live-two">
        <div @click="outIn">转入</div>
      </div>
    </div>
    <!-- 产品亮点 -->
    <div class="bg"></div>
    <section class="features">
      <div class="title">产品亮点</div>
      <div class="bright-spot">
        <div class="icon-text">
          <div class="icon">
            <img src="../../assets/images/icon-acess.png" alt>
          </div>
          <div class="text">
            <p>每日计息</p>
            <p>灵活存期</p>
          </div>
        </div>
        <div class="icon-text">
          <div class="icon">
            <img src="../../assets/images/icon-risk.png" alt>
          </div>
          <div class="text">
            <p>超低风险</p>
            <p>收益稳健</p>
          </div>
        </div>
        <div class="icon-text">
          <div class="icon">
            <img src="../../assets/images/icon-account.png" alt>
          </div>
          <div class="text">
            <p>申请0费用</p>
            <p>快速到账</p>
          </div>
        </div>
      </div>
    </section>
    <div class="bg"></div>
    <section class="transaction">
      <div class="title">交易规则</div>
      <div class="into">
        <div class="head">转入</div>
        <div>T日18:00（北京时间）前转入，T+1日计息；</div>
        <div>T日18:00（北京时间）后转入，T+1日计息；</div>
      </div>
      <div class="out">
        <div class="head">转出</div>
        <div>T日18:00（北京时间）前转出，T日23:59前可到账；</div>
        <div>T日18:00（北京时间）后转出，T+1日23:59前可到账；</div>
      </div>
      <div class="tips">转入/转出均不收取费用</div>
    </section>
  </div>
</template>
<script>
import { NavBar, Tab, Tabs, Toast, Dialog } from "vant";
import {
  coinPlanShow,
  coinPlan,
  coinAssets,
  totalIncomeAndWaitIncomeNum
} from "../../axios/api.js";
export default {
  name: "currentPlan",
  components: {
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog
  },
  data() {
    return {
      topNav: [],
      numOne: "",
      nameNow: "",
      contianLive: [],
      pay: "",
      add: [],
      moneyShow: true,
      moneyShowTwo: false
    };
  },
  created() {
    this.getNav();
    this.getCoinPlan();
  },
  methods: {
    //返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 历史收益
    history() {
      this.$router.push("/history");
    },
    //资金记录
    onClickRight() {
      this.$router.push("/capitalRecord");
    },
    //获取获取内容百分比
    getCoinPlan() {
      var that = this;
      coinPlan({
        params: {
          page: 1,
          rows: 2,
          virtualWalletId: that.numOne
        }
      }).then(res => {
        that.contianLive = res.data.data.currentPlan;
        console.log(that.contianLive, 222);
      });
    },

    // 获取nav条
    getNav() {
      var that = this;
      coinPlanShow().then(res => {
        that.topNav = res.data.data;
        that.numOne = res.data.data[0].virtual_wallet_id;
        that.nameNow = res.data.data[0].virtualWalletName;
        that.addPay();
      });
    },
    //获取累计收益
    addPay() {
      var that = this;
      totalIncomeAndWaitIncomeNum({
        params: {
          virtualWalletId: that.numOne,
          token: localStorage.getItem("setToken")
        }
      }).then(res => {
        console.log(res.data, 333);
        that.add = res.data.data;
        if (that.add.id == -1) {
          //判断是否购买过
          that.moneyShowTwo = true;
          that.moneyShow = false;
        } else {
          that.moneyShowTwo = false;
          that.moneyShow = true;
        }
      });
    },
    //获取nav的id和name
    getNavId(index, title) {
      var that = this;
      that.numOne = that.topNav[index].virtual_wallet_id;
      that.nameNow = that.topNav[index].virtualWalletName;
      that.getCoinPlan();
      that.addPay();
    },
    outGo() {
      this.$router.push({
        name: "turnOut",
        query: {
          id1: this.add.id,
          id2: this.contianLive.virtualWalletId,
          money: this.add.investmentAmount,
          name: this.nameNow
        }
      });
    },
    outIn() {
      this.$router.push({
        name: "shiftTo",
        query: {
          id1: this.contianLive.id,
          id2: this.contianLive.virtualWalletId,
          less: this.contianLive.minAmount,
          name: this.nameNow,
          id3: this.add.id
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.current-plan {
  background: #fff;
  .icon-zj {
    font-size: 26px;
    vertical-align: middle;
  }
  .tabs {
    .tabs-item {
      img {
        vertical-align: middle;
        margin-top: -2px;
      }
    }
  }
  .bg {
    height: 10px;
    background: #f2f3f5;
  }
  .features {
    .title {
      text-align: left;
      font-size: 14px;
      font-weight: bold;
      color: #323233;
      border-bottom: 1px solid #ebedf0;
      background: #fff;
      padding: 10px;
    }
    .bright-spot {
      display: flex;
      padding: 10px 15px;
      .icon-text {
        flex: 1;
      }
      .text {
        margin: 5px 0;
        font-size: 14px;
        color: #323233;
      }
    }
  }
  .transaction {
    .title {
      text-align: left;
      font-size: 14px;
      font-weight: bold;
      color: #323233;
      border-bottom: 1px solid #ebedf0;
      background: #fff;
      padding: 10px;
    }
    .into,
    .out {
      text-align: left;
      padding: 5px 10px;
      font-size: 12px;
      color: #323233;
    }
    .head,
    .tips {
      font-weight: 700;
    }
    .tips {
      text-align: left;
      padding: 10px;
    }
  }
}
.plan-live {
  padding: 0 0 10px;
  > p:nth-child(1) {
    font-size: 25px;
    color: #fc5353;
    margin: 25px 0 5px;
  }
  > p:nth-child(2) {
    font-size: 11px;
    color: #999999;
  }
  > p:nth-child(3) {
    font-size: 13px;
    color: #333;
    margin: 2px 0 6px;
  }
  > .plan-live-one {
    font-size: 13px;
    color: #666;
    margin: 12px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    div {
      width: 45%;
    }
  }
  > .plan-live-two {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 0 5px;
    div {
      width: 100px;
      height: 30px;
      color: #fff;
      background-color: #eac68d;
      border-radius: 20px;
      line-height: 30px;
      font-size: 14px;
    }
    div:nth-child(2) {
      background-color: #d1a568;
    }
  }
}
</style>
